<template>
  <div>
    <div class="header_search">
     <div class="numberCode">
      <p>工单编号:</p>
     <div class="code_input"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
     </div>
        <p>工单状态：</p>
       <el-select v-model="status" slot="prepend" placeholder="请选择">
     <el-option
      v-for="item in chose"
      :key="item.statusId"
      :label="item.statusName"
      :value="item.statusId">
    </el-option>
    </el-select>
   <div @click="clickFn" class="kan"> <el-button slot="append" style="background-color:#5373E0 ;margin-left:10px; color:#fff"  icon="el-icon-search">查询</el-button></div>
    </div>
    <Listpublic :list="this.list" :xuanlist="listFn"></Listpublic>
    <ListFoter :data="this.data" @next="nextFn" @ipd="ipdFn"/>

    </div>
</template>
<script>
import Listpublic from '@/components/ListPublic.vue'
import ListFoter from '@/components/ListFoter.vue'
import { xuanlist, chose, xuanlisttwo } from '@/api/list'
export default {
  components: {
    Listpublic,
    ListFoter

  },
  data () {
    return {
      status: '', // 下拉框
      input: '', // 工单编号
      // value: '', // 选择的值
      pageIndex: 1, // 当前页
      pageSize: 10, // 一个页面几条
      isRepair: false,
      list: [], // 渲染表格的
      data: {}, // 总的书籍
      totalCount: '', // 总数量
      totalPage: '', // 总页数
      chose: []// 选择的4个值
    }
  },
  async created () {
    // const res = await List(this.$store.state.user.userId)
    // console.log(this.$store.state.user.userId)
    // console.log(res)
    this.listFn()
    const res = await chose()
    this.chose = res
    console.log(this.chose)
  },
  methods: {
    async  listFn () {
      const res1 = await xuanlist({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        isRepair: this.isRepair
      })
      this.list = res1.currentPageRecords
      console.log(this.list)
      this.data = res1
      console.log(this.data)
      this.totalCount = res1.totalCount
      this.totalPage = res1.totalPage
    },
    // 搜索框实现
    async listtwo () {
      const res = await xuanlisttwo({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        taskCode: this.input,
        status: this.status,
        isRepair: this.isRepair
      })
      this.list = res.currentPageRecords
    },
    // 点击切换试图
    clickFn () {
      console.log(this.input)
      console.log(this.status)
      this.listtwo()
    },
    // 上一页
    async nextFn (v) {
      this.pageIndex += v
      this.listFn()
      console.log(111)
    },
    // 下一页
    async ipdFn (v) {
      console.log(222)
      this.pageIndex -= v
      this.listFn()
    }
  }

}
</script>

<style lang="scss" scoped>
.header_search{
  display: flex;
height: 64px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 20px;
padding-left: 17px;
background-color: #fff;
margin-top: 50px;
.numberCode{
  display: flex;
  margin-right: 30px;
p{
  margin-right: 30px;
}
.code_input{
  margin-top: 5px;
  margin-left: -8px;
}
.config{
  margin-left: -100px;
  width: 100px;

}

}
}
</style>
